<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .movie-box {
        display: flex;
      }
      .movie-box li {
        padding: 5px 10px;
        margin: 5px;
        background: #eee;
        border-radius: 5px;
      }
      .movie-box .active {
        background: red;
        color: gold;
      }
    </style>
  </head>
  <body>
    <!-- vue生效的盒子区域 -->
    <div id="app">
      <!-- {{}}双括号 + 数据变量，就可以渲染数据 -->
      <h1>{{msg}}</h1>

      <hr />
      <h2>第八、显示文本指令 v-text</h2>
      <div v-text="msg"></div>
      <p v-text="html"></p>
      <h2>第九个、显示富文本(包含标签等的文本)指令 v-html:</h2>
      <p v-html="html"></p>
    </div>

    <!-- vue-cdn引入，说白了，就是引入一个线上地址 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      /*
       vue不直接操作dom,而是通过 -数据- 来改变视图，实现我们想要的效果
       1. 渲染 {{ 变量 }} 渲染 打印
       2. 指令 
         v-for 循环指令
         v-on:click 添加事件，他的简写 @符号
         v-bind: 在vue中，如果一个属性要变成动态的，就需要添加这个指令，指令的简写就是一个冒号 ：
       3. 接下来要改变样式，样式也可以通过 数据 控制类的显示隐藏  v-bind:class
       4. 条件判断指令 v-if v-else-if v-else
      */
      const app = new Vue({
        el: '#app', // 挂载元素
        // 放置数据的地方 数据有哪些种类：基本数据类型+引用数据类型
        // 基本：6种 number string boolean null undefined Symbol
        // 引用：3种 obj array
        // function 有单独放置区域 methods或者计算属性中
        data: {
          html: '<div> <h3>标题</h3> <p> <b>时间:2022年4月19号</b> 文章内容</p>   </div>',
          msg: 'hello Vue! 2001,您好！', // string
          bool: true,
          isOk: true,
          timer: null,
          count: 1,
          name: undefined,
          obj: {
            page: 1,
            size: 5,
          },
          arr: ['热映', '影院', '待映', '经典电影'],
          // 全局下标
          tabIndex: 0,
        },
        // 放置方法或者函数
        methods: {
          handleClick(item, index) {
            // 通过具体点击获取到每一个下标，把这个下标，赋值给全局的下标
            this.tabIndex = index
            console.log(this.tabIndex, 'tabIndex')
            console.log('item', item, index)

            // 接下来要改变样式，样式也可以通过数据控制类的显示隐藏
          },
          handleOk() {
            this.isOk = !this.isOk
          },
        },
      })

      console.log(app, 'app')
    </script>
  </body>
</html>
